<template>
  <div >
    <img src="/img/首页6.png" style="width: 100%;position: relative;">
    <el-container style="position: absolute;top: 15px;left: 0px">
      <el-header style="position: relative;left: 150px">
        <el-icon :size="50" style="top: 12px;"><Platform /></el-icon>
        <span style="font-size: 45px;color: #333333">考证网</span>
      </el-header>
      <el-main style="position: absolute">
        <el-card style="width: 350px;margin-top: 70px;margin-left: 150px;height: 530px;border-radius: 20px" >
          <img src="/img/首页2.png" style="width: 220px;position:relative;left: 45px">
          <h3 style="text-align:center;">用户登录</h3>
          <el-form label-position="top">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button color="#0089BA"  style="width:100%;" @click="userLogin()">登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button  style="width:100%;" @click="dialogVisible=true">注册</el-button>
            </el-form-item>
          </el-form>
          <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
            (体验账号:admin 密码:admin)
          </div>
        </el-card>
      </el-main>
    </el-container>
    <!-- 注册弹窗-->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width: 400px;padding: 50px" :before-close="handleClose">
      <el-form label-position="top">
        <el-form-item label="姓名" >
          <el-input placeholder="请输入真实姓名" v-model="reg.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-tooltip content="注意:密码由大小写字母、数字、特殊符号组成" placement="right">
            <el-input placeholder="请输入密码" type="password" v-model="reg.password"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input placeholder="请输入邮箱" v-model="reg.email"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input placeholder="请输入电话号码" v-model="reg.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="float: right" @click="regUser">注册</el-button>
    </el-dialog>
  </div>


</template>
<script setup>

import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const dialogVisible = ref(false);
const dialogTitle = ref('注册');

//定义变量保存登录信息
const user = ref({
  username:'',
  password:''
})
//定义变量保存注册信息
const reg = ref({
  username:'',
  password:'',
  email:'',
  phone:''
})

const handleClose = ()=>{

  if (confirm('确定要关闭弹窗吗')){
    dialogVisible.value = false;
    reg.value = {};
  }
}
const userArr = ref([]);
const loadUser = ()=>{
  let data = qs.stringify(user.value);
  axios.get(BASE_URL+'/v1/user/select?'+data).then((response)=>{
    if(response.data.code==2000){
      userArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const userLogin = ()=>{
  let data = qs.stringify(user.value);
  console.log(data);
  axios.post(BASE_URL+'/login',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('登录成功');
      localStorage.user = JSON.stringify(response.data.data);
      router.push('/user');
      loadUser()
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const regUser = ()=>{
  let data = qs.stringify(reg.value);
  axios.post(BASE_URL+'/v1/user/reg',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('注册成功');
      reg.value = {};
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

</script>


<style scoped>

</style>